<template>
    <div class="found">
        <div class="top_box">
            <div class="left_box">
                <div class="left_btn">
                    <div class="btn1">书讯</div>
                    <div class="btn2">书城</div>
                </div>
            </div>
            <div class="search_box" @click="goSearch">
                <button></button>
                <input type="text" placeholder="搜索书名、作者" disabled />
            </div>
        </div>

        <header-nav></header-nav>

        <router-view></router-view>
    </div>
</template>

<script>
import HeaderNav from "@/components/header-nav.vue";

export default {
    // name: "fonut",
    data() {
        return {};
    },
    methods: {
        goSearch() {
            this.$router.push({
                path: "/search",
            });
        },
    },
    components: {
        HeaderNav,
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
.found {
    width: 100%;
    padding: 0 15px;
    .top_box {
        width: 100%;
        // height: 45px;
        // background-color: red;
        display: flex;
        align-items: center;
        padding: 10px 0;
    }
    .left_box {
        width: 28%;
        // margin: 10px 0;
        .left_btn {
            background-color: #e9e9e9;
            border-radius: 20px;
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            box-shadow: inset 3px 3px 7px -2px #999;
            // padding: 0 5px;
            // box-sizing: border-box;
        }
        .btn1,
        .btn2 {
            width: 45%;
            text-align: center;
            font-size: 14px;
            color: #777;
        }
        .btn2 {
            width: 55%;
            height: 100%;
            line-height: 30px;
            background: #000;
            border-radius: 20px;
            color: #fff;
        }
    }
    .search_box {
        width: 70%;
        position: relative;
        margin-left: 10px;

        button {
            border: 0;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: #f6f6f6;
            position: absolute;
            top: 5px;
            left: 10px;
            background-image: url(@/assets/sousuo.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        input {
            height: 30px;
            // line-height: 30px;
            border-radius: 20px;
            padding: 5px 10px 5px 35px;
            width: 100%;
            background: #f6f6f6;
            border: 1px solid #f6f6f6;
        }
    }
}
</style>
